<template>
    <div>
       <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 卡片式图 -->
        <el-card>
            <!-- 警告区域 -->
           <el-alert title="注意：只允许为第三级分类设置相关参数！" 
           type="warning" :closable="false" show-icon></el-alert>
           
           <!-- 选择商品分类区域 -->
           <el-row class="cat_opt">
               <el-col>
                   <span>请选择商品分类：</span>
                   <!-- 选择商品分类的级联选择框 -->
                   <el-cascader
                        v-model="selectedCateKeys"
                        :options="catelist"
                        :props="optionProps"
                        @change="handleChange">
                    </el-cascader>
                    
               </el-col>
           </el-row>
           
           <!--tab页签区域  -->
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <!-- 添加动态参数 -->
                <el-tab-pane label="动态参数" name="many">
                    <!-- 添加参数按钮 -->
                    <el-button type="primary" size="mini" 
                    :disabled="isBtnDisabled">添加参数</el-button>
                </el-tab-pane>
                <!-- 添加静态属性面板 -->
                <el-tab-pane label="静态属性" name="only">
                    <!-- 添加属性按钮 -->
                    <el-button type="primary" size="mini"
                    :disabled="isBtnDisabled">添加属性</el-button>
                </el-tab-pane>
            </el-tabs>
            
            
            
        </el-card>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // 商品分类列表
            catelist:[],
            // 级联选择框的配置对象
           optionProps:{
                // checkStrictly:true,  s  
                expandTrigger: 'hover',
                value:'cat_id',
                label:'cat_name',
                children:'children'
           },
            // 级联选择框双向绑定的数组
            selectedCateKeys:[],
            //被激活的页签名称 
            activeName:'many'
        }
    },
    created(){
        // 获取所有的商品分类列表
        this.getCateList()
    },
    methods:{
         // 获取所有的商品分类列表
        async getCateList(){
            const {data:res } = await this.$http.get('categories')
            if(res.meta.status !==200){
                return this.$message.error('获取商品分类失败！')
            }
            //  this.$message.success('获取商品分类成功！')
            this.catelist = res.data
            // console.log(this.catelist)
        },
        // 级联选择框中选项发生变化，会触发这个函数
        async handleChange(){
            console.log(this.selectedCateKeys)
            // 如果数组长度不为3则选中的不是三级分类，，则返回，将数组清空
            if(this.selectedCateKeys.length !==3){
                this.selectedCateKeys=[]
                return
            }
            // 选择是三级分类
            // 根据所选分类的ID和当前所处的面板，获取对应的参数
 
            const {data:res} = await this.$http.get(`categories/${this.cateId}/
            attributes`,{
                params:{sel:'this.activeName'}
            })
            if(res.meta.status!==200){
                return this.$message.error('获取参数列表失败！')
            }
            console.log(res.data);
        },
        // tab页签点击事件的处理函数
        handleTabClick(){
            console.log(this.activeName);
        },
    },
    // 计算属性
    computed:{
        // 如果按钮需要被禁用就返回true
        // eslint-disable-next-line vue/return-in-computed-property
        isBtnDisabled(){
            if(this.selectedCateKeys.length!==3){
                return true
            }
            return false
        },
        // 当前选中的三级分类的ID
        // eslint-disable-next-line vue/return-in-computed-property
        cateId(){
            if(this.selectedCateKeys.length===3){
                console.log(this.selectedCateKeys[2]);
                return this.selectedCateKeys[2]
            }
            return null
        }
    }
}
</script>
<style lang="less" scoped>
    .cat_opt{
        margin: 15px 0;
    }
</style>
